<template>
    <view class="shenzhen">
        <view class="header">

            <view class="custom_header" style="height: {{navH}}px">
                <view>
                    <view id="icon">

                        <u-icon name="arrow-left" color="#2979ff" size="18" @click="icon"></u-icon>
                    </view>
                </view>
                <view>商机管理</view>
                <view style="color: #09f; font-size: 20px; margin-right: 10px;" @click="add">+</view>
            </view>
            <view style="display: flex;padding: 20px 60px; justify-content: space-between;">
                <!-- 1111 -->
                <qiaopaixu></qiaopaixu>
                <qiaoshaixuan></qiaoshaixuan>
            </view>
        </view>
        <view class="one">
            <view v-if="currentTab === 0">
                <ul class="one_b">
                    <li class="one_li" v-for="(item, index)  in    list   " :key="index">
                        <view class="one_p">
                            <p @click="gongsi">{{ item.name }}</p>
                            <p>{{ item.data }}</p>
                            <p>{{ item.a }} <span style="color: #666;">{{ item.b }}<span>{{ item.c }}</span> </span></p>
                        </view>
                        <view style="text-align: center; position: relative;" class="vv">
                            <p>
                                <span
                                    style="display: block; position: absolute; top: 12px; right: 80px; width: 8px; height: 8px; background-color: #09f; border-radius: 50%;"></span>

                                <span style="font-size: 14px;">{{ item.d }}</span>
                            </p>
                            <p>
                                <img src="/static/img/1.png" class="one_img" @click="liLi">
                            </p>
                            <p>李小明</p>
                        </view>
                        <view class="box1">
                            <view @click="genjin"><img src="/static/img/xinxi.png" alt=""
                                    style="width: 20px; height: 20px; vertical-align: middle;"> 跟进</view>
                            <qiaorenwutan></qiaorenwutan>

                            <qiaodianhuatan></qiaodianhuatan>

                            <view @click="geng"><img src="/static/img/dayuhao.png" alt=""
                                    style="width: 20px; height: 20px; vertical-align: middle;"> 更多</view>
                        </view>
                    </li>
                </ul>

            </view>
            <view v-if="currentTab === 1">
                <u-collapse :value="['2']">
                    <u-collapse-item title="初步洽谈10%   10个">
                        <li class="one_li" v-for="(item, index)  in    list   " :key="index">
                        <view class="one_p">
                            <p @click="gongsi">{{ item.name }}</p>
                            <p>{{ item.data }}</p>
                            <p>{{ item.a }} <span style="color: #666;">{{ item.b }}<span>{{ item.c }}</span> </span></p>
                        </view>
                        <view style="text-align: center; position: relative;" class="vv">
                            <p>
                                <span
                                    style="display: block; position: absolute; top: 12px; right: 80px; width: 8px; height: 8px; background-color: #09f; border-radius: 50%;"></span>

                                <span style="font-size: 14px;">{{ item.d }}</span>
                            </p>
                            <p>
                                <img src="/static/img/1.png" class="one_img" @click="liLi">
                            </p>
                            <p>李小明</p>
                        </view>
                        <view class="box1">
                            <view @click="genjin"><img src="/static/img/xinxi.png" alt=""
                                    style="width: 20px; height: 20px; vertical-align: middle;"> 跟进</view>
                            <qiaorenwutan></qiaorenwutan>

                            <qiaodianhuatan></qiaodianhuatan>

                            <view @click="geng"><img src="/static/img/dayuhao.png" alt=""
                                    style="width: 20px; height: 20px; vertical-align: middle;"> 更多</view>
                        </view>
                    </li>
                    </u-collapse-item>
                 
                </u-collapse>
                <u-collapse :value="['3']">
                    <u-collapse-item title="深入沟通10%   10个">
                        <li class="one_li" v-for="(item, index)  in    list   " :key="index">
                        <view class="one_p">
                            <p @click="gongsi">{{ item.name }}</p>
                            <p>{{ item.data }}</p>
                            <p>{{ item.a }} <span style="color: #666;">{{ item.b }}<span>{{ item.c }}</span> </span></p>
                        </view>
                        <view style="text-align: center; position: relative;" class="vv">
                            <p>
                                <span
                                    style="display: block; position: absolute; top: 12px; right: 80px; width: 8px; height: 8px; background-color: #09f; border-radius: 50%;"></span>

                                <span style="font-size: 14px;">{{ item.d }}</span>
                            </p>
                            <p>
                                <img src="/static/img/1.png" class="one_img" @click="liLi">
                            </p>
                            <p>李小明</p>
                        </view>
                        <view class="box1">
                            <view @click="genjin"><img src="/static/img/xinxi.png" alt=""
                                    style="width: 20px; height: 20px; vertical-align: middle;"> 跟进</view>
                            <qiaorenwutan></qiaorenwutan>

                            <qiaodianhuatan></qiaodianhuatan>

                            <view @click="geng"><img src="/static/img/dayuhao.png" alt=""
                                    style="width: 20px; height: 20px; vertical-align: middle;"> 更多</view>
                        </view>
                    </li>
                    </u-collapse-item>
                 
                </u-collapse>
                <u-collapse :value="['4']">
                    <u-collapse-item title="产品报价 10%   10个">
                        <li class="one_li" v-for="(item, index)  in    list   " :key="index">
                        <view class="one_p">
                            <p @click="gongsi">{{ item.name }}</p>
                            <p>{{ item.data }}</p>
                            <p>{{ item.a }} <span style="color: #666;">{{ item.b }}<span>{{ item.c }}</span> </span></p>
                        </view>
                        <view style="text-align: center; position: relative;" class="vv">
                            <p>
                                <span
                                    style="display: block; position: absolute; top: 12px; right: 80px; width: 8px; height: 8px; background-color: #09f; border-radius: 50%;"></span>

                                <span style="font-size: 14px;">{{ item.d }}</span>
                            </p>
                            <p>
                                <img src="/static/img/1.png" class="one_img" @click="liLi">
                            </p>
                            <p>李小明</p>
                        </view>
                        <view class="box1">
                            <view @click="genjin"><img src="/static/img/xinxi.png" alt=""
                                    style="width: 20px; height: 20px; vertical-align: middle;"> 跟进</view>
                            <qiaorenwutan></qiaorenwutan>

                            <qiaodianhuatan></qiaodianhuatan>

                            <view @click="geng"><img src="/static/img/dayuhao.png" alt=""
                                    style="width: 20px; height: 20px; vertical-align: middle;"> 更多</view>
                        </view>
                    </li>
                    </u-collapse-item>
                </u-collapse>
                <u-collapse :value="['5']">
                    <u-collapse-item title="流失商机 10%   10个">
                        <li class="one_li" v-for="(item, index)  in    list   " :key="index">
                        <view class="one_p">
                            <p @click="gongsi">{{ item.name }}</p>
                            <p>{{ item.data }}</p>
                            <p>{{ item.a }} <span style="color: #666;">{{ item.b }}<span>{{ item.c }}</span> </span></p>
                        </view>
                        <view style="text-align: center; position: relative;" class="vv">
                            <p>
                                <span
                                    style="display: block; position: absolute; top: 12px; right: 80px; width: 8px; height: 8px; background-color: #09f; border-radius: 50%;"></span>

                                <span style="font-size: 14px;">{{ item.d }}</span>
                            </p>
                            <p>
                                <img src="/static/img/1.png" class="one_img" @click="liLi">
                            </p>
                            <p>李小明</p>
                        </view>
                        <view class="box1">
                            <view @click="genjin"><img src="/static/img/xinxi.png" alt=""
                                    style="width: 20px; height: 20px; vertical-align: middle;"> 跟进</view>
                            <qiaorenwutan></qiaorenwutan>

                            <qiaodianhuatan></qiaodianhuatan>

                            <view @click="geng"><img src="/static/img/dayuhao.png" alt=""
                                    style="width: 20px; height: 20px; vertical-align: middle;"> 更多</view>
                        </view>
                    </li>
                    </u-collapse-item>
                </u-collapse>
                <u-collapse :value="['6']">
                    <u-collapse-item title="成交商机 10%   10个">
                        <li class="one_li" v-for="(item, index)  in    list   " :key="index">
                        <view class="one_p">
                            <p @click="gongsi">{{ item.name }}</p>
                            <p>{{ item.data }}</p>
                            <p>{{ item.a }} <span style="color: #666;">{{ item.b }}<span>{{ item.c }}</span> </span></p>
                        </view>
                        <view style="text-align: center; position: relative;" class="vv">
                            <p>
                                <span
                                    style="display: block; position: absolute; top: 12px; right: 80px; width: 8px; height: 8px; background-color: #09f; border-radius: 50%;"></span>

                                <span style="font-size: 14px;">{{ item.d }}</span>
                            </p>
                            <p>
                                <img src="/static/img/1.png" class="one_img" @click="liLi">
                            </p>
                            <p>李小明</p>
                        </view>
                        <view class="box1">
                            <view @click="genjin"><img src="/static/img/xinxi.png" alt=""
                                    style="width: 20px; height: 20px; vertical-align: middle;"> 跟进</view>
                            <qiaorenwutan></qiaorenwutan>

                            <qiaodianhuatan></qiaodianhuatan>

                            <view @click="geng"><img src="/static/img/dayuhao.png" alt=""
                                    style="width: 20px; height: 20px; vertical-align: middle;"> 更多</view>
                        </view>
                    </li>
                    </u-collapse-item>
                 
                </u-collapse>
            </view>

        </view>

        <view class="footer">
            <view :class="{ active: currentTab === 0 }" @click="switchTab(0)" data-tab="0"> <img
                    src="/static/img/liebiao.png" alt="" style="width: 20px; height: 20px; vertical-align: middle;">列表
            </view>
            <view :class="{ active: currentTab === 1 }" @click="switchTab(1)" data-tab="1"> <img
                    src="/static/img/kanbanguanli.png" alt="" style="width: 20px; height: 20px; vertical-align: middle;"> 看板
            </view>
        </view>

    </view>
</template>

<script setup lang="ts">
import qiaorenwutan from '@/pages/qiao-crm/tan/qiaorenwutan.vue'
import qiaodianhuatan from '@/pages/qiao-crm/tan/qiaodianhuatan.vue'
import qiaoshaixuan from '@/pages/qiao-crm/tan/qiaoshaixuan.vue'
import qiaopaixu from '@/pages/qiao-crm/tan/qiaopaixu.vue'
import { ref } from "vue";
const list = ref([
    { id: 0, name: '商机标题', data: "预计销售金额:￥10,000.00", a: "预计签单日期:", b: "2019-04-01", c: "", d: "初步洽谈", img: '/static/img/1.png' },
    { id: 1, name: '商机标题', data: "预计销售金额:￥10,000.00", a: "预计签单日期:", b: "2019-04-01", c: "", d: "初步洽谈", img: '/static/img/1.png' },
    { id: 2, name: '商机标题', data: "预计销售金额:￥10,000.00", a: "预计签单日期:", b: "2019-04-01", c: "", d: "初步洽谈", img: '/static/img/1.png' },
    { id: 3, name: '商机标题', data: "预计销售金额:￥10,000.00", a: "预计签单日期:", b: "2019-04-01", c: "", d: "初步洽谈", img: '/static/img/1.png' },
    { id: 4, name: '商机标题', data: "预计销售金额:￥10,000.00", a: "预计签单日期:", b: "2019-04-01", c: "", d: "初步洽谈", img: '/static/img/1.png' },
    { id: 5, name: '商机标题', data: "预计销售金额:￥10,000.00", a: "预计签单日期:", b: "2019-04-01", c: "", d: "初步洽谈", img: '/static/img/1.png' },
    { id: 6, name: '商机标题', data: "预计销售金额:￥10,000.00", a: "预计签单日期:", b: "2019-04-01", c: "", d: "初步洽谈", img: '/static/img/1.png' },
    { id: 7, name: '商机标题', data: "预计销售金额:￥10,000.00", a: "预计签单日期:", b: "2019-04-01", c: "", d: "初步洽谈", img: '/static/img/1.png' },
    { id: 8, name: '商机标题', data: "预计销售金额:￥10,000.00", a: "预计签单日期:", b: "2019-04-01", c: "", d: "初步洽谈", img: '/static/img/1.png' },
    { id: 9, name: '商机标题', data: "预计销售金额:￥10,000.00", a: "预计签单日期:", b: "2019-04-01", c: "", d: "初步洽谈", img: '/static/img/1.png' },

])

const currentTab = ref(0)
const switchTab = (tab: number) => {
    currentTab.value = tab;
};


const geng = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaogongsi'
    })
}

const genjin = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoshezhi/qiaoxinjiangenjin'
    })
}

const icon = () => {
    uni.navigateBack({
        delta: 1
    })
}
const liLi = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaotouxiang'
    })
}
const gongsi = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaogongsi'
    })
}
const add = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoshezhi/qiaochuangjian'
    })
}
</script>

<style scoped lang="scss">
.active {
    color: blue;
}

.vv {
    width: 100px;
}

.one_img {
    width: 30px;
    height: 30px;
}

.one_p:nth-child(1) {
    margin-left: 8px;
    margin-top: 8px;
}

.one_b {
    width: 350px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
}

.one_a {
    display: flex;
}

.one_li {
    width: 340px;
    height: 150px;
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    box-shadow: 0 0 10px #ccc;
    margin-top: 15px;
    margin-left: 10px;
    line-height: 30px;
    position: relative;
}

.box1 {
    position: absolute;
    top: 110px;
    left: 10px;
    display: flex;
    justify-content: space-between;
    width: 320px;
}

.img {
    width: 50px;
    height: 50px;
}

.header {
    height: 80px;
    background-color: #fff;
}

.one {
    height: calc(100vh - 80px - 50px);
    background-color: rgb(249, 249, 249);
    overflow: hidden;
    overflow-y: scroll;
}

.footer {
    width: 350px;
    margin-left: 8px;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-around;
    border: 1px solid #ccc;
}

.custom_header {
    display: flex;
    justify-content: space-between;
    width: 100vw;
    font-weight: bold;
    z-index: 99;
    margin-top: 40px;
    background-color: #fff;
}

.search {
    display: flex;
    width: 375px;
    justify-content: space-between;
    padding-top: 10px;
    align-items: center;
    padding: 10px 10px;
    position: relative;

    .inp {
        width: 250px;
        height: 60rpx;
        border: 1rpx solid #ccc;
        border-radius: 30rpx;
        padding-left: 30px;
        margin-left: 30px;

    }
}

.search_img {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 100rpx;
    top: 35rpx;
}

.shenzhen {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
}
</style>
